<template>
	<view>
		<view style="margin-top: 20rpx;">
			<view class="flex align-c label-item" @click="open">
				<view class="label-tit">类型</view>
				<view class="f1" v-if="option.type">{{ option.type }}</view>
				<view class="f1" v-else>请选择</view>
				<image src="/static/home/into-gray.png" mode="aspectFill" class="into" />
			</view>
			<block v-if="typeIndex == 0">
				<view class="flex align-c label-item">
					<view class="label-tit">账号</view>
					<input type="text" v-model="option.account" class="f1 label-item_input" placeholder="请输入账号" placeholder-class="p-c">
				</view>
				<view class="flex align-c label-item">
					<view class="label-tit">姓名</view>
					<input type="text" v-model="option.name" class="f1 label-item_input" placeholder="请输入对应账号姓名" placeholder-class="p-c">
				</view>
			</block>
			<block v-if="typeIndex == 1">
				<view class="flex align-c label-item">
					<view class="label-tit">卡号类型</view>
					<input type="text" v-model="option.card_type" class="f1 label-item_input" placeholder="请输入卡号类型" placeholder-class="p-c">
				</view>
				<view class="flex align-c label-item">
					<view class="label-tit">持卡人</view>
					<input type="text" v-model="option.card_man" class="f1 label-item_input" placeholder="请输入持卡人姓名" placeholder-class="p-c">
				</view>
				<view class="flex align-c label-item">
					<view class="label-tit">卡号</view>
					<input type="text" v-model="option.card_code" class="f1 label-item_input" placeholder="请输入卡号" maxlength="19" placeholder-class="p-c">
				</view>
			</block>
		</view>
		
		<button class="btn" @click="confirm">确认添加</button>
		
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="item_box">
				<view class="item" v-for="(item,index) in typeList" :key="index" @click="checkType(index)">{{ item.name }}</view>
				<view class="item_red" @click="close">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				typeIndex: 0,
				typeList: [
					{
						name: '支付宝',
						type: 1,
					},
					{
						name: '银行卡',
						type: 2,
					},
				],
				option: {
					type: '支付宝',
					account: '',
					name: '',
					card_type: '',
					card_man: '',
					card_code: '',
				},
				
			}
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			checkType(i) {
				this.typeIndex = i;
				this.option.type = this.typeList[i].name;
				this.show = false;
			},
			async confirm() {
				const { option,typeIndex } = this;
				if(typeIndex == 1) {
					if(!option.card_code || !option.card_man || !option.card_type) {
						this.toast('请完善表单');
						return false;
					}
				}else {
					if(!option.account || !option.name) {
						this.toast('请完善表单');
						return false;
					}
				}
				let res = await this.$api.post('staff/account/create', option);
				if(res.code == 200) {
					uni.showToast({
						title: res.msg
					});
					setTimeout(v => {
						uni.navigateBack()
					},2500);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.label-item {
		background-color: #FFF;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F7F7F7;
		font-size: 27rpx;
		&_input {
			font-size: 27rpx;
		}
	}
	.label-tit {
		padding-left: 35rpx;
		width: 120rpx;
		// text-align: center;
	}
	.into {
		width: 12rpx;
		height: 20rpx;
		margin-right: 35rpx;
	}
	.btn {
		margin: 107rpx 27rpx;
		background-color: #F17816;
		color: #FFF;
		font-size: 32rpx;
		height: 93rpx;
		line-height: 93rpx;
	}
</style>